<template>
  <el-dialog :title="title" v-model="isShow" width="45%" @close="closeHandler" draggable="true">
    <el-form :model="formData" :rules="formRules" ref="formRef" label-width="120px" :inline="false">
      <el-form-item label="规则名称" prop="title">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>


      <el-form-item label="权限标识" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>


      <el-form-item label="规则地址" prop="path">
        <el-input v-model="formData.path"></el-input>
      </el-form-item>

      <el-form-item label="图标规则" prop="icon">
        <el-input v-model="formData.icon"></el-input>
      </el-form-item>


      <el-form-item label="显示状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :label="0">隐藏</el-radio>
          <el-radio :label="1">显示</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="权重大小" prop="weight">
        <el-input v-model="formData.weight"></el-input>
      </el-form-item>

      <el-form-item label="菜单类型" prop="type" v-if="formData.children">
        <el-radio-group v-model="formData.type">
          <el-radio :label="'menu'">菜单</el-radio>
          <el-radio :label="'file'">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <el-button type="primary" @click="onSubmit">确定</el-button>
    <el-button type="primary" plain @click="isShow = false">取消</el-button>
  </el-dialog>
</template>
<script setup>
import { reactive, ref, toRaw, computed } from 'vue'
import { addMenuApi } from '../../../api/menus'
import { ElMessage } from "element-plus";
import { useMenuReply } from '../../../xf-hook/editDel'
import { getMenuInfoApi, editMenuApi } from '../../../api/menus'
const isShow = ref(false)
const menuReply = useMenuReply()
const formRef = ref()
const defaultState = {
  title: '',
  name: '',
  path: '',
  icon: '',
  status: 1,
  weight: 0,
  type: 'menu',
  pid: 0,
  id: null
}
const emit = defineEmits(["updateList"]);
const formData = reactive({ ...defaultState });
const onSubmit = async () => {
  const data = toRaw(formData);
  delete data.children
  await formRef.value.validate();
  if (formData.id) {
    //put
    await editMenuApi(data).then((res) => {
      ElMessage(res.msg)
      isShow.value = false
      emit("updateList");
    })

  } else {
    await addMenuApi(data).then((res) => {
      ElMessage(res.msg)
      isShow.value = false
      emit("updateList");
    })

  }

}
const addChildData = (obj) => {
  obj.title = ''
  obj.name = '',
    obj.icon = '',
    obj.weight = ''
  obj.pid = obj.id
  delete obj.id;
  console.log(obj);
  isShow.value = true
  Object.assign(formData, obj)
}
const editReplyData = async (id) => {
  isShow.value = true
  let res = await getMenuInfoApi(id)
  Object.assign(formData, res.data)
}
const formRules = {
  title: [{ required: true, message: "请选择", trigger: "blur" }],
  name: [{ required: true, message: "请选择", trigger: "blur" }],
  path: [{ required: true, message: "请选择", trigger: "blur" }],
  icon: [{ required: true, message: "请选择", trigger: "blur" }],
  weight: [{ required: true, message: "请选择", trigger: "blur" }],
  status: [{ required: true, message: "请选择", trigger: "change" }],
};
const closeHandler = () => {
  formRef.value.resetFields()
  Object.assign(formData, { ...defaultState })
}
const title = computed(() => {
  return formData.id ? '修改' : '新增'
})
defineExpose({
  isShow,
  addChildData,
  editReplyData
});
</script>